<template>
  <ga-scrollbar type="track" style="height: calc(100vh - 182px); overflow: auto">
    <div class="app_card">
      <ga-list :bordered="false">
        <ga-list-item
          v-for="(item, index) in dataList"
          :key="item.dictId"
          class="hover_card"
          :class="index === activeId ? 'active' : ''"
          @click="handleClickItem(item, index)"
        >
          <ga-list-item-meta>
            <template #title>
              <slot name="content" :item="item" />
            </template>
          </ga-list-item-meta>
          <template v-if="index === activeId && isShowBtn" #actions>
            <p class="circle circle1 flex_center">
              <SvgIcon
                size="12px"
                name="edit"
                class="svg_icon svg_common"
                @click="handleEdit(item, 'edit')"
              />
            </p>
            <p class="circle flex_center">
              <SvgIcon
                size="12px"
                name="del"
                class="del_svg_icon svg_common"
                @click="handleEdit(item, 'delete')"
              />
            </p>
          </template>
        </ga-list-item>
      </ga-list>
      <ga-divider v-if="dataList?.length > 0">已展示全部数据</ga-divider>
    </div>
  </ga-scrollbar>
</template>

<script setup>
import { ref, defineEmits, watch } from "vue";
const props = defineProps({
  dataList: {
    type: Array,
    default: () => [{ appname: "appname", chinese_name: "chinese_name" }],
  },
  isShowDelete: {
    type: Boolean,
    default: true,
  },
  isShowBtn: {
    type: Boolean,
    default: true,
  },
  loading: {
    type: Boolean,
    default: true,
  },
});
const activeId = ref(0);
const emits = defineEmits(["handleEdit", "handleDelete", "handleClickItem"]);
// 处理方法
const handleClickItem = (item, index) => {
  activeId.value = index;
  emits("handleClickItem", item);
};
const handleEdit = (item, type) => {
  if (type === "edit") emits("handleEdit", item);
  else emits("handleDelete", item);
};

watch(
  () => props.dataList,
  (newVal) => {
    if (newVal) handleClickItem(newVal?.[activeId.value], activeId.value);
  }
);
defineExpose({ handleClickItem });
</script>

<style lang="scss" scoped>
.app_card {
  .active {
    background: #eef4ff;
    border: 1px solid #0f5ef7 !important;
  }
  :deep(.garco-list-item) {
    cursor: pointer;
  }
}
.app_card .garco-list-item {
  padding: 8px 16px;
}
:deep(.garco-scrollbar-container) {
  overflow: visible;
}
.svg_common {
  fill: #011948;
  margin-right: 0 !important;
}
.circle {
  border-radius: 50%;
  width: 22px;
  height: 22px;
  background: #c8d5e6;
}
.circle:hover {
  background: #ffcdc7 !important;
  .del_svg_icon {
    fill: #f53f3f !important;
  }
}
.circle1:hover {
  background: #99c2ee !important;
  .svg_icon {
    fill: #0f5ef7 !important;
  }
}
</style>
